<template>
  <div class="page">
    <div class="sidebar" :style="{width: collapsed?'200px': '80px'}">
      <Sidebar />
      <svg-icon 
        class-name="trigger" 
        icon-class="menu-unfold" 
        v-show="!collapsed"
        @click="() => (collapsed = !collapsed)"
      />
      <svg-icon 
        class-name="trigger" 
        icon-class="menu-fold" 
        v-show="collapsed"
        @click="() => (collapsed = !collapsed)"
      />
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
  
  <!-- <a-layout id="home-page">
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo"/>
      <Sidebar/>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <svg-icon 
          class-name="trigger" 
          icon-class="menu-unfold" 
          v-show="!collapsed"
          @click="() => (collapsed = !collapsed)"
        />
        <svg-icon 
          class-name="trigger" 
          icon-class="menu-fold" 
          v-show="collapsed"
          @click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>
      <a-layout-content
        :style="{ margin: '24px 16px', padding: '10px', background: '#fff', minHeight: '280px' }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout> -->
</template>

<script setup lang="ts">
import {ref} from 'vue'
import Sidebar from '@/components/home/sidebar.vue'

let collapsed = ref(true)
</script>

<style lang="less" scoped >
.page{
  display: flex;
  background-color: @base-page-background;

  .sidebar{
    height: 100vh;
    position: sticky;
    top: 0;
    background-color: @base-menu-background;
    padding: 20px 0;
    transition: all .5s;

    .trigger {
      font-size: 24px;
      line-height: 64px;
      margin: 0 20px;
      cursor: pointer;
      transition: color 0.3s;
      color: @base-menu-color;
      position: absolute;
      bottom: 10px;
    }
    .trigger:hover {
      color: @base-menu-color-active;
    }
  }

  .content{
    flex: 1;
  }
}
// #home-page {
//   min-height: 100vh;
//   .logo {
//     height: 32px;
//     background: rgba(255, 255, 255, 0.2);
//     margin: 16px;
//   }
//   .trigger {
//     font-size: 18px;
//     line-height: 64px;
//     margin: 0 20px;
//     cursor: pointer;
//     transition: color 0.3s;
//   }
//   .trigger:hover {
//     color: #1890ff;
//   }
// } 
</style>
